<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gritter demo for jQuery - boedesign.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/gritter.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/jquery.gritter.js"></script>
<script type="text/javascript">

	$(document).ready(function(){
		
		$('#add-sticky').click(function(){
		
			// You can have it return a unique id, this can be used to manually remove it later using
			/*
			$.gritter.remove(unique_id, { 
					fade: true,
					speed: 'fast'
				}
			);
			*/
			var unique_id = $.gritter.add({
				// (string | mandatory) the heading of the notification
				title: 'This is a sticky notice!',
				// (string | mandatory) the text inside the notification
				text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
				// (string | optional) the image to display on the left
				image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg',
				// (bool | optional) if you want it to fade out on its own or just sit there
				sticky: true, 
				// (int | optional) the time you want it to be alive for before fading out
				time: '' 
			});
			
			return false;
		
		});
		
		$('#add-regular').click(function(){
		
			$.gritter.add({
				// (string | mandatory) the heading of the notification
				title: 'This is a regular notice!',
				// (string | mandatory) the text inside the notification
				text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
				// (string | optional) the image to display on the left
				image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
				// (bool | optional) if you want it to fade out on its own or just sit there
				sticky: false, 
				// (int | optional) the time you want it to be alive for before fading out
				time: ''
			});
			
			return false;
		
		});
		
		$('#add-without-image').click(function(){
			
			$.gritter.add({
				// (string | mandatory) the heading of the notification
				title: 'This is a notice without an image!',
				// (string | mandatory) the text inside the notification
				text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
			});
			
			return false;
		});
		
		$("#remove-all").click(function(){
			
			$.gritter.removeAll();
			return false;
			
		});
		
		// FORCE the notification above to be removed after 3 seconds
		/*
		setTimeout(function(){
			$.gritter.remove(unique_id, { 
					fade: true,
					speed: 'fast'
				}
			);
		}, 3000);
		*/
		
		
	});
</script>
<style type="text/css">
	body {
		background:#222 url('http://www.123backgrounds.com/freebg/8822.jpg');
		color:#fff;
	}
	a {
		color:#00ff00;
	}
	#container {
		width:600px;
		background:#333;
		padding:10px;
	}
</style>
</head>


<body>
<div id="container">
	<h1>Gritter Demo</h1>
	<p>
		The super awesome background is just to show you that all notifications are transparent!
		<em>Note: this doesn't look NEARLY as good in IE6 (still works fine).  It's part of me making a stand against the worlds worst browser.  All other browsers (FF 3, FF 3.5, Opera 9, IE7, IE8, Safari 4) have been tested and proven worthy.</em>
	</p>
	<ul>
		<li>
			<a href="#" id="add-regular">Add regular notification</a>: Fades out after a certain amount of time, can be set for each notification.
		</li>
		<li>
			<a href="#" id="add-sticky">Add sticky notification</a>: Doesn't run on a fade timer.  Just sits there until the user manually removes it by clicking on the (X)
		</li>
		<li>
			<a href="#" id="add-without-image">Add notification without image</a>
		</li>
		<li>
			<a href="#" id="remove-all">Remove all notifications</a>
		</li>
	</ul>
</div>

</body>
</html>